<template>
  <view class="container">
    <view class="form">
      <text class="title">登录</text>
      
      <!-- 用户名输入框 -->
      <input 
        class="input" 
        placeholder="请输入用户名（默认：test）" 
        v-model="username" 
        @focus="handleInputFocus('username')"
        @blur="handleInputBlur('username')"
      />
      <text class="error-tips" v-if="showError.username">{{ errorMsg.username }}</text>
      
      <!-- 密码输入框 -->
      <input 
        class="input" 
        placeholder="请输入密码（默认：123456）" 
        type="password" 
        v-model="password" 
        @focus="handleInputFocus('password')"
        @blur="handleInputBlur('password')"
      />
      <text class="error-tips" v-if="showError.password">{{ errorMsg.password }}</text>
      
      <!-- 记住密码复选框 -->
      <view class="remember-wrap">
        <checkbox 
          v-model="rememberPwd" 
          color="#007aff"
        ></checkbox>
        <text class="remember-text">记住密码（7天有效）</text>
      </view>
      
      <!-- 登录按钮 -->
      <button class="btn" type="primary" @click="handleLogin" :loading="isLoading">登录</button>
      
      <!-- 注册链接 -->
      <view class="link">
        <text>没有账号？</text>
        <navigator url="/pages/tabBar/tabcompage/register/register">去注册</navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      rememberPwd: false, // 是否记住密码
      isLoading: false, // 登录加载状态
      showError: { // 表单错误显示状态
        username: false,
        password: false
      },
      errorMsg: { // 表单错误提示
        username: '用户名不能为空',
        password: '密码不能为空'
      }
    };
  },
  onLoad() {
    // 页面加载时，自动填充记住的密码（如果有）
    this.getRememberedUserInfo();
  },
  onShow() {
    // 每次页面显示时，检查是否已登录（防止后退到登录页）
    this.checkLoginStatus();
  },
  methods: {
    // 输入框聚焦：隐藏错误提示
    handleInputFocus(type) {
      this.showError[type] = false;
    },
    // 输入框失焦：校验必填项
    handleInputBlur(type) {
      if (!this[type]) {
        this.showError[type] = true;
      }
    },
    // 获取本地存储的用户信息（记住密码功能）
    getRememberedUserInfo() {
      const rememberedUser = uni.getStorageSync('rememberedUser');
      if (rememberedUser) {
        // 检查存储是否过期（7天有效期）
        const now = new Date().getTime();
        if (now - rememberedUser.expireTime <= 7 * 24 * 60 * 60 * 1000) {
          this.username = rememberedUser.username;
          this.password = rememberedUser.password;
          this.rememberPwd = true;
        } else {
          // 过期则清除存储
          uni.removeStorageSync('rememberedUser');
        }
      }
    },
    // 检查登录状态（防止已登录后后退到登录页）
    checkLoginStatus() {
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo) {
        // 已登录，直接跳转到首页（路径与tabBar配置一致）
        uni.switchTab({
          url: "/pages/tabBar/demos/customViewPage/customViewPage"
        });
      }
    },
    // 表单校验
    validateForm() {
      let isPass = true;
      // 用户名校验
      if (!this.username.trim()) {
        this.showError.username = true;
        this.errorMsg.username = '用户名不能为空';
        isPass = false;
      } else if (this.username.trim().length < 3) {
        this.showError.username = true;
        this.errorMsg.username = '用户名长度不能少于3位';
        isPass = false;
      }
      
      // 密码校验
      if (!this.password.trim()) {
        this.showError.password = true;
        this.errorMsg.password = '密码不能为空';
        isPass = false;
      } else if (this.password.trim().length < 6) {
        this.showError.password = true;
        this.errorMsg.password = '密码长度不能少于6位';
        isPass = false;
      }
      
      return isPass;
    },
    // 登录逻辑（适配Accounts的name字段查询）
    handleLogin() {
      // 1. 先执行表单校验
      if (!this.validateForm()) return;
      
      // 2. 调用loginUser云函数校验账号密码
      this.isLoading = true;
      uniCloud.callFunction({
        name: 'loginUser', // 登录专用云函数
        data: {
          username: this.username.trim(), // 传用户名
          password: this.password.trim()  // 传密码
        },
        success: (res) => {
          this.isLoading = false;
          const { code, msg, data } = res.result;
          if (code === 200) {
            // 登录成功：存储用户信息
            const userInfo = {
              userId: data._id,
              username: data.username,
              user_id: data.user_id
            };
            uni.setStorageSync('userInfo', userInfo);
            
            // 记住密码逻辑
            if (this.rememberPwd) {
              uni.setStorageSync('rememberedUser', {
                username: this.username,
                password: this.password,
                expireTime: new Date().getTime()
              });
            } else {
              uni.removeStorageSync('rememberedUser');
            }

            // ========== 修改点：固定传“我的”而非用户名 ==========
            const app = getApp();
            app.updateTabBarText("我的");
            
            // 跳转到首页（确保路径与tabBar配置一致）
            uni.switchTab({
              url: "/pages/tabBar/demos/customViewPage/customViewPage",
              success: () => {
                uni.showToast({ title: '登录成功' });
              }
            });
          } else {
            // 登录失败：提示错误
            uni.showToast({
              title: msg || '用户名或密码错误',
              icon: 'none',
              duration: 1500
            });
          }
        },
        fail: (err) => {
          this.isLoading = false;
          console.error('登录请求失败：', err);
          uni.showToast({ title: '网络错误，请重试', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style scoped>
/* 原有样式不变 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}
.form {
  width: 100%;
  max-width: 500rpx;
  background-color: #fff;
  padding: 40rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, 0.1);
}
.title {
  font-size: 36rpx;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}
.input {
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 18rpx;
  margin-bottom: 10rpx;
  width: 100%;
  font-size: 28rpx;
}
.error-tips {
  font-size: 24rpx;
  color: #ff3b30;
  margin-bottom: 20rpx;
  display: block;
  height: 24rpx;
}
.remember-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 26rpx;
  color: #666;
}
.remember-text {
  margin-left: 10rpx;
}
.btn {
  width: 100%;
  margin-bottom: 30rpx;
  height: 80rpx;
  font-size: 28rpx;
  border-radius: 8rpx;
}
.link {
  text-align: center;
  font-size: 26rpx;
  color: #666;
}
.link navigator {
  color: #007aff;
  margin-left: 8rpx;
}
</style>